<template>
	<div class="login-container">
		<div class="login-header">
			<div class="header-main">
				<img src="../assets/img/logo.jpg" />
				<div class="text-logo">教发系统</div>
			</div>
		</div>
		<div class="login-main">
			<div class="main-box">
				<img src="../assets/img/login/leftBox.png" />
				<div class="right-box">
					<div class="right-title">欢迎登录</div>
					<div class="right-interval"></div>
					<el-form :model="loginForm" :rules="rules" ref="loginForm" class="demo-loginForm">
						<el-form-item prop="username" class="login-item">
							<el-input placeholder="请输入账号" v-model="loginForm.username" autocomplete="off" @keyup.enter.native="submitForm('loginForm')"
							 maxlength="20">
								<i slot="prefix" class="el-input__icon el-icon-user"></i>
							</el-input>
						</el-form-item>
						<el-form-item prop="password" class="login-item">
							<el-input placeholder="请输入密码" v-model="loginForm.password" @keyup.enter.native="submitForm('loginForm')"
							 autocomplete="off" show-password maxlength="20">
								<i slot="prefix" class="el-input__icon el-icon-lock"></i>
							</el-input>
						</el-form-item>
					</el-form>
					<el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
				</div>
			</div>
		</div>
		<div class="login-footer">
			<div>
				Copyright © 湖北蒙田信息科技有限公司 All Rights Reserved.</br>
				教师资格证考试模拟平台
			</div>
		</div>
	</div>
</template>

<script>
	import {
		mapActions,
		mapState,
		mapGetters
	} from "vuex";
	import {
		sha256
	} from 'js-sha256';
	export default {
		data() {
			return {
				loginForm: {
					username: '',
					password: '',
				},
				rules: {
					username: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						},
						{
							min: 5,
							max: 20,
							message: '用户名长度在为5-20字符',
							trigger: 'blur'
						}
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 20,
							message: '密码长度为6-20位',
							trigger: 'blur'
						}
					]
				}
			}
		},
		watch: {
			"loginForm.username"(val) {
				this.loginForm.username = String(val).replace(/[^\w\.\/]/ig, '');
			},
			
		},
		methods: {
			async submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						let loginForm = JSON.parse(JSON.stringify(this.loginForm));
						loginForm.password = sha256(loginForm.password);
						this.login(loginForm);
					}
				});
			},
			...mapActions("user", ["login"])
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.login-container {
		@include flex-column(flex-start, center);
		min-width: 1366px;
		width: 100%;
		background-color: #F9FAFC;

		.login-header {
			width: 100%;
			height: 72px;
			background-color: #FFFFFF !important;
			@include flex-row(center, center);

			.header-main {
				width: 1200px;
				height: 100%;
				@include flex-row(flex-start, center);

				img {
					width: 48px;
				}

				.text-logo {
					font-size: 18px;
					font-weight: bold;
					margin-left: 16px;
				}
			}
		}

		.login-main {
			width: 100%;
			height: 680px;
			@include flex-row(center, center);
			.main-box {
				width: 1200px;
				height: 100%;
				@include flex-row(center, center);

				img {
					width: 640px;
					height: 480px;
				}

				.right-box {
					width: 437px;
					height: 480px;
					background-color: #FFFFFF;
					@include flex-column(flex-start, center);

					.right-title {
						font-size: 20px;
						font-weight: bold;
						color: $mainColor;
						margin-top: 48px;
					}

					.right-interval {
						width: 48px;
						height: 3px;
						background-color: $mainColor;
						border-radius: 1px;
						margin-top: 12px;
					}

					.demo-loginForm {
						margin-top: 40px;
					}

					::v-deep .el-input__inner {
						height: 42px;
						line-height: 42px;
					}

					.login-item {
						width: 288px;
						margin-bottom: 32px;
					}

					.el-input__icon {
						color: $mainColor;
					}

					::v-deep .el-button {
						width: 288px;
						height: 42px;
						color: #FFFFFF;
						font-size: 18px;
						box-shadow: 1px 4px 16px rgba(64, 158, 255, 0.16);
						opacity: 1;
						margin-top: 80px;
						border-radius: 4px;
					}
				}
			}
		}

		.login-footer {
			min-height: 100px;
			@include flex-column(center, center);
			font-size: 12px;
			color: #999999;
		}
	}
</style>
